<!--
  page-search组件 接受两个参数 config,btnConfig
  config是配置from表单的配置文件
  btnConfig是配置右下角按钮的配置文件

  抛出事件 click
  两个参数：formData：用户输入的数据 type 按钮点击的类型
 -->

<template>
  <div class="page-search">
    <yc-form v-bind="config" v-model="formData" :btnConfig="btnConfig" @click="btnClick"> </yc-form>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import ycForm from '@/base-ui/form'
import { IForm, Ibtn } from '@/base-ui/form/types'
interface Props {
  config: IForm
  btnConfig: Ibtn[]
}
const props = withDefaults(defineProps<Props>(), {})
/*
  双向绑定的属性应该由配置文件的field来决定
  formData中的属性应该动态来决定
*/
const formItems = props.config.formConfig ?? []
const formOriginData: any = {}
for (const item of formItems) {
  formOriginData[item.field] = ''
}

const formData = ref(formOriginData)

const emit = defineEmits(['click'])
function btnClick(type: string) {
  if (type == '重置') {
    // 因为子组件做了浅拷贝，直接重置的为初始化对象不会影响浅拷贝 解决方法： 循环将对象里面的key全部改成空字符串
    for (const key in formOriginData) {
      formData.value[key] = formOriginData[key]
    }
  }
  emit('click', { type, formData })
}
</script>

<style lang="less" scoped></style>
